<template>
  <div>
    <!--offset 滚动条与底部距离小于 offset 时触发load事件 -->
    <!-- :immediate-check="false" 是否在初始化时立即执行滚动位置检查 -->
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
        :immediate-check="false"
        offset="50"
      >
        <article-item
          v-for="obj in articleList"
          :key="obj.art_id"
          :artObj="obj"
          @click.native="goArticleDetail(obj.art_id)"
        >
        </article-item>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import { getArticleListAPI } from '@/api'
import ArticleItem from '@/components/ArticleItem.vue'
export default {
  props: {
    channel_id: Number
  },
  components: {
    ArticleItem
  },
  data () {
    return {
      articleList: [], // 文章列表
      loading: false, // 底部加载状态
      finished: false, // 数据是否全部加载完成
      nextTime: new Date().getTime(), // 下一页的文章列表开头文章的发布时间
      refreshing: false // 顶部刷新状态
    }
  },
  async created () {
    this.getArticleListFn()

    // // console.log(this.channel_id)
    // const res = await getArticleListAPI({ channel_id: this.channel_id })
    // // console.log(res.data)
    // this.articleList = res.data.data.results
    // this.nextTime = res.data.data.pre_timestamp
  },
  methods: {
    // 跳转文章详情页
    goArticleDetail (artId) {
      this.$router.push({
        path: '/article_detail',
        query: {
          aId: artId
        }
      })
    },
    // 底部加载
    onLoad () {
      // 异步更新数据 获取文章列表
      if (this.articleList.length > 0) {
        // 上来先走created里的请求,拿到数据铺设页面,等用户真的滚动到下面了,再执行onload事件,判断数组有数据了 再发下一页的请求
        this.getArticleListFn()
      }
      // const res = await getArticleListAPI({
      //   channel_id: this.channel_id,
      //   timestamp: this.nextTime
      // })
      // // if (res.data.data && res.data.data.results && res.data.data.results.length === 0) {
      // //   // 本次加载更多 无数据
      // //   this.finished = true
      // // }
      // // 可选链操作符 --- 不考虑兼容性可用
      // if (res.data?.data?.results?.length === 0) {
      //   // 本次加载更多 无数据
      //   this.finished = true
      // }
      // this.articleList = [...this.articleList, ...res.data.data.results]
      // // 保证下次触底还触发onLoad事件
      // this.loading = false
    },

    // 获取文章列表
    async getArticleListFn () {
      const res = await getArticleListAPI({
        channel_id: this.channel_id,
        timestamp: this.nextTime
      })
      this.articleList = [...this.articleList, ...res.data.data.results]
      if (res.data?.data?.pre_timestamp === null) {
        // 本次加载更多 无数据
        this.finished = true
      } else {
        this.nextTime = res.data.data.pre_timestamp
      }
      this.loading = false
      this.loading = false
    },
    onRefresh () {
      this.articleList = []
      this.refreshing = new Date().getTime()
      this.getArticleListFn()
    }
  }
}
</script>

<style>
</style>
